In Svelte, stores provide a reactive and simple way to share state across multiple components without prop drilling. By creating a store outside of any component, you can import and use it wherever needed, keeping all components in sync automatically.
Both components reactively reflect the same store value. Updating the store in one component automatically updates the others using it, thanks to Svelte's reactive subscription system ($store syntax).
Multiple components need access to the same piece of state.
Passing props through several layers would be cumbersome.
You want centralized logic or helper methods for state manipulation.
You need reactive updates across unrelated components.
Keep stores outside component scope to make them truly global or shared.
Use
$storesyntax inside components for automatic subscriptions.Encapsulate complex logic in custom stores with helper methods to keep components clean.
For temporary or route-specific state, consider creating stores inside components to avoid unnecessary global state.